<template>
	<view>
		<view class="notes">
			<p><span>*</span>物料审批信息</p>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<!-- 审批  界面  -->
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input">
				<view style="width: 100px; font-size: 16px;">工单流水号:</view>
				<view class="input">
					<text class="info">{{workordernumber}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input" >
				<view style="width: 80px; font-size: 16px;">物料名称:</view>
				<view class="input">
					<text class="info">{{materialname}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">物料型号:</view>
				<view class="input">
					<text class="info">{{materialmodel}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">数量:</view>
				<view class="input">
					<text class="info">{{materialnumber}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">价格:</view>
				<view class="input">
					<text class="info">{{materialprice}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">申请时间:</view>
				<view class="input">
					<text class="info">{{applicationtime}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">领料类型:</view>
				<view class="input">
					<text class="info">{{pickingtype}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">申请理由:</view>
				<view class="input">
					<text class="info">{{pickingreason}} </text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">申请状态:</view>
				<view class="input">
					<text class="info">{{pickingstatus}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 120px; font-size: 16px;">技术负责审批:</view>
				<view class="input">
					<text class="info">{{technologyapproval}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">采购审批:</view>
				<view class="input">
					<text class="info">{{procureapproval}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">主管审批:</view>
				<view class="input">
					<text class="info">{{departmentapproval}}</text>
				</view>
			</view>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 70px; font-size: 16px;">驳回理由:</view>
				<view class="input">
					<u--input placeholder="请输入驳回理由"  border="surround" v-model="reason" type="text" clearableb v-if="reasonShow "></u--input>
					<text class="info" v-else>{{reason}}</text> 
				</view>
			</view>
			<u-gap height="10px" bgColor="#ffffff "></u-gap>
			<!-- 是否通过 -->
			<view v-if="show">
				<text style="margin-left: 20px; margin-top: 15px; font-size: 16px;">请领导审批:</text>
				<view style="margin-left: 30px; margin-top: 15px;">
				<view class="u-page__radio-item">
					<u-radio-group
						v-model="radiovalue"
						placement="row"
						iconColor="#ffffff">
						<u-radio
							:customStyle="{marginRight: '16px'}"
							v-for="(item, index) in radiolist"
							:key="index"
							:label="item.name"
							:name="item.name"
							@change="radioChange"
							>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			</view>
			<u-gap height="20px" bgColor="#ffffff "></u-gap>
		</view>
		
		
		<button class="appro-bt" @click="appro" v-if="show">审批</button>
		<u-gap height="60px" bgColor="#ffffff "></u-gap>
	</view>
</template>

<script>
	let purchasingmaterialsid;
	export default{
		data(){
			return{
				time: null,
				show: false,
				//横向排列形式数据
				radiolist: [{
						name: '同意',
						disabled: false
					},
					{
						name: '不同意',
						disabled: false
					},
				],
				radiovalue: '同意',
				workordernumber: '',  // 工单流水号
				materialname: '',     // 物料名称
				materialmodel: '',    // 物料型号 
				materialnumber: '',   // 数量
				materialprice: '',    //价格
				applicationtime: '',  //申请时间
				pickingtype: '',      // 领料类型 
				pickingreason: '',    //申请理由
				pickingstatus: '',    // 申请状态 
				technologyapproval: '', // 技术负责 审批
				procureapproval: '',    // 采购 审批
				reason: '',             // 驳回理由 
				purchasingmaterialsid: '',  // id 
				departmentapproval: '',		// 主管审批 
				reasonShow: false,	   
			}
		},
		onLoad(option) {
			purchasingmaterialsid = JSON.parse(decodeURIComponent(option.data))
			this.purchasingmaterialsid = purchasingmaterialsid.msg
			uni.request({
				url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findPurchaseMaterielByPurchasingmaterialsid",
				method: 'GET',
				data:{
					purchasingmaterialsid: purchasingmaterialsid.msg
				},
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				success: (res) => {
					console.log(res,"----------")
					this.workordernumber = res.data.data[0].workordernumber
					this.materialname = res.data.data[0].materialname
					this.materialmodel = res.data.data[0].materialmodel
					this.materialnumber = res.data.data[0].materialnumber
					this.materialprice = res.data.data[0].materialprice
					this.applicationtime = res.data.data[0].applicationtime
					this.pickingtype = res.data.data[0].pickingtype
					this.pickingreason = res.data.data[0].pickingreason
					this.pickingstatus = res.data.data[0].pickingstatus
					this.technologyapproval = res.data.data[0].technologyapproval
					this.procureapproval = res.data.data[0].procureapproval
					this.reason = res.data.data[0].reason
					this.purchasingmaterialsid = res.data.data[0].purchasingmaterialsid
					this.departmentapproval = res.data.data[0].departmentapproval
					if (this.reason == null || this.reason == '') {
						this.reason = '暂无数据'
					}
					if( this.technologyapproval == '待审批'){ 
						this.show = true
					}
				}
			})
			
		},
		
		methods: {
			appro(){   //技术人员 审批 
				let userid = uni.getStorageSync("userid")
				uni.request({
					url: 'https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/updateDepartmentApproval',
					method: 'GET',
					data:{
						purchasingmaterialsid: this.purchasingmaterialsid,
						departmentapproval :  this.radiovalue,
						reason:  this.reason,
						userId: userid
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'success'
						})
						this.timer = setTimeout( () => {
							uni.navigateTo({
								url: '/pages/index/technicalApproveVue/technicalApproveList'
							})			
						}, 2000)
					},
				})
			},
			radioChange(n){     // 单选框 状态 
				this.radiovalue = n;
				switch (n){
					case '不同意':
						this.reasonShow = true
						break;
					case '同意':
						this.reasonShow = false
						break;
				}
			},
		},
		onPullDownRefresh(){ // 下拉刷新
			uni.request({
				url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findPurchaseMaterielByPurchasingmaterialsid",
				method: 'GET',
				data:{
					purchasingmaterialsid: this.purchasingmaterialsid
				},
				header: {
					"Content-Type": "application/json" //请求头信息
				},
				success: (res) => {
					this.workordernumber = res.data.data[0].workordernumber
					this.materialname = res.data.data[0].materialname
					this.materialmodel = res.data.data[0].materialmodel
					this.materialnumber = res.data.data[0].materialnumber
					this.materialprice = res.data.data[0].materialprice
					this.applicationtime = res.data.data[0].applicationtime
					this.pickingtype = res.data.data[0].pickingtype
					this.pickingreason = res.data.data[0].pickingreason
					this.pickingstatus = res.data.data[0].pickingstatus
					this.technologyapproval = res.data.data[0].technologyapproval
					this.procureapproval = res.data.data[0].procureapproval
					this.reason = res.data.data[0].reason
					this.purchasingmaterialsid = res.data.data[0].purchasingmaterialsid
					this.departmentapproval = res.data.data[0].departmentapproval
					if( this.technologyapproval == '待审批'){
						this.show = true
					}
				}
			})
			uni.stopPullDownRefresh() // 终止刷新 
		}
	}
</script>

<style lang="scss">
	page {
	       background-color: #ffffff;
	   }
	.appro-bt{
		width: 200px;
		margin-top: 50px;
		border-radius: 25px;
		border: 3rpx solid #00a3f5;
	}
	.notes{
		width: 20%px;
		margin: 0px auto 30px;
		font-size: 14px;
		
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.info{
		font-size: 17px;
		color: #ababab;
	}
	.title{
		width: 80px;
		height: 22px;
		font-size: 16px;
	}
	
	.user-input{
		width: 335px;
		margin: 10px auto;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}
	.fenjie{
		width: 335px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}
	
	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}
</style>